<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Light The Candle</title>
    
	<script>
		var isiPad = navigator.userAgent.match(/iPad/i) != null;
		if(isiPad){
		document.write('<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />');
		}else{
		document.write('<meta name="viewport" content="width=device-width,initial-scale=0.4,maximum-scale=0.4">');
		}
	</script>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>

<style>
html, body {
  margin: 0;
  padding: 0;
}
#page {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
 <!--<link href="style.css" rel="stylesheet" type="text/css" />-->
 
 <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="style.css" /> <!-- iphone-portrait -->
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="style-iphone-landscape.css" /> <!-- iphone-landscape -->
    <link rel="stylesheet" media="all and (device-width: 320px) and (device-height: 568px) and (orientation:portrait)" href="style-iphone5-portrait.css" /> <!-- iphone5-portrait -->
    <link rel="stylesheet" media="all and (device-width: 320px) and (device-height: 568px) and (orientation:landscape)" href="style-iphone5-landscape.css" /> <!-- iphone5-landscape -->
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="style-ipad-portrait.css" /> <!-- ipad-portrait -->
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="style-ipad-landscape.css" /> <!-- ipad-landscape
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> <!-- htcdesire-portrait.css 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> <!-- htcdesire-landscape -->
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="style.css" /> <!--  -->
 
 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    
    <script src="js.js"></script>
</head>
<body>
<div id=page>

<div id="log"></div>
<div id="candle-content">
        
    	<div id="candle-stick-content">
            
        </div>
        
        <div id="first-player" class="actual-player">
        	<audio id="audio1_es" src="audio/1_es.mp3" preload="auto" > </audio>
            <audio id="audio1_en" src="audio/1_en.mp3" preload="auto" > </audio>
        </div>
        <div id="second-player" class="next-player">
        	<audio id="audio2_es" src="audio/2_es.mp3" preload="auto" > </audio>
            <audio id="audio2_en" src="audio/2_en.mp3" preload="auto" > </audio>
        </div>
        <div id="third-player" class="next-player">
        	<audio id="audio3_es" src="audio/3_es.mp3" preload="auto" > </audio>
            <audio id="audio3_en" src="audio/3_en.mp3" preload="auto" > </audio>
        </div>
        
        <div id="on">
        	<audio id="turnOn" src="audio/On.mp3" preload="auto" class="On" > </audio>
        </div>
      
    </div>
    
    <div id="finger-touch"></div>
    
    <div id="smoke-content">
    	<img id="smoke-image" src="" height="300" width="100" alt="" />
    </div>
    
	<div id="candle-light-content" class="move">
    	<img src="images/flame.gif" height="284" width="168" alt="" />
        <!--<video src="images/flame.png" height="284" width="168" preload="auto" >
        
         height="284" width="168"-->
    </div>
    <div id="text-content">
    
    </div>

</div>
 
<script>
var page = document.getElementById('page'),
    ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    // Detect if this is running as a fullscreen app from the homescreen
    fullscreen = window.navigator.standalone,
    android = ~ua.indexOf('Android'),
    lastWidth = 0;
 
if (android) {
  // Android's browser adds the scroll position to the innerHeight, just to
  // make this really fucking difficult. Thus, once we are scrolled, the
  // page height value needs to be corrected in case the page is loaded
  // when already scrolled down. The pageYOffset is of no use, since it always
  // returns 0 while the address bar is displayed.
  window.onscroll = function() {
    page.style.height = window.innerHeight + 'px'
  } 
}
var setupScroll = window.onload = function() {
  // Start out by adding the height of the location bar to the width, so that
  // we can scroll past it
  if (ios) {
    // iOS reliably returns the innerWindow size for documentElement.clientHeight
    // but window.innerHeight is sometimes the wrong value after rotating
    // the orientation
    var height = document.documentElement.clientHeight;
    // Only add extra padding to the height on iphone / ipod, since the ipad
    // browser doesn't scroll off the location bar.
    if (iphone && !fullscreen) height += 60;
    page.style.height = height + 'px';
  } else if (android) {
    // The stock Android browser has a location bar height of 56 pixels, but
    // this very likely could be broken in other Android browsers.
    page.style.height = (window.innerHeight + 56) + 'px'
  }
  // Scroll after a timeout, since iOS will scroll to the top of the page
  // after it fires the onload event
  setTimeout(scrollTo, 0, 0, 1);
};
(window.onresize = function() {
  var pageWidth = page.offsetWidth;
  // Android doesn't support orientation change, so check for when the width
  // changes to figure out when the orientation changes
  if (lastWidth == pageWidth) return;
  lastWidth = pageWidth;
  setupScroll();
})();
</script>

</body>
</html>